<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<div>
    <input type="text" placeholder="请输入分钟数" v-model="minute">
    <input type="text" placeholder="请输入秒钟数" v-model="second">
    <input type="button" value="倒计时开始按钮" v-on:click="start()">
    <input type="button" value="stop" @click="stop()">
    <h1>{{minuteCount}}:&nbsp;{{secondCount}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let v=new Vue({
        el:"div",
        data:{
            minute:"",
            second:"",
            minuteCount:"0",
            secondCount:"0",
            timer:"",
        },
        methods:{
            start(){
                v.minuteCount=v.minute;
                v.secondCount=v.second;
                v.timer=setInterval(function () {

                    if (v.minuteCount==0&&v.secondCount==1){
                        clearInterval(v.timer);

                    }
                    if (v.secondCount==0){
                        v.minuteCount--;
                        v.secondCount=60;
                    }
                    v.secondCount--;
                },100);
            },
            stop(){
                clearInterval(v.timer)
            }
        }
    })
</script>
</body>
</html>